<template>
      <div>
            <!-- 头部搜索框部分 begin -->
            <header>
                  <div class="inputBox">
                        <input type="text" placeholder="搜索附近的商家、商品" class="searchNear">
                  </div>
            </header>
            <!-- 头部搜索框部分 end -->

            <!-- 主体分类部分 begin -->
            <div class="listBox">
                  <div class="listLeft">
                        <ul>
                              <li v-for="list in listClass" :key="list.id" class="classBox" @click="listChange" :ajax="true">
                                    <span class="classBg"></span>
                                    {{list.title}}
                              </li>
                        </ul>
                  </div>
                  <div class="listRight">
                        <div v-for="item in listDetail" :key="item.id">
                              <p class="itemTitle">{{item.title}}</p>
                              <ul class="singleBox">
                                    <li v-for="single in item.children" :key="single.id" class="gingleItem">
                                          <img :src="single.imgsrc" alt="" class="singleImg">
                                          {{single.ctitle}}
                                    </li>
                              </ul>
                        </div>
                  </div> 
            </div>
            <!-- 主体分类部分 end -->

            <!-- 页脚导航部分 begin -->
            <footer class="navFooterBox">
              <router-link to="/index" class="navFooter footerFirst">首页</router-link>
              <router-link to="/index/list" class="secSelect">分类</router-link>
              <router-link to="/index/cart" class="navFooter footerThird">购物车</router-link>
              <router-link to="/index/order" class="navFooter footerForth">订单</router-link>
              <router-link to="/index/mine" class="navFooter footerFive">我的</router-link>
            </footer>
            <!-- 页脚导航部分 end -->   
      </div>
</template>
<script>
export default {
      data(){
            return {
                  listClass:[],
                  listDetail:[]
            }
      },
      methods:{
            // 左侧主要分类请求
            getListClassify(){
                  this.jq.get(this.apiurl+'/list/classify').done(result=>{
                        if(result.error==0){
                              this.listClass=result.data
                        }
                  })
            },
            // 右侧列表详情请求
             getListDetails(){
                  this.jq.get(this.apiurl+'/list/details').done(result=>{
                        if(result.error==0){
                              this.listDetail=result.data
                        }
                  })
            },
            // 左侧列表点击事件
            listChange(){
                  this.jq('.classBox').not(event.target).removeClass('listChecked')
                  this.jq('.classBox').not(event.target).prop('ajax',true)
                  this.jq(event.target).addClass('listChecked')
                  if(this.jq(event.target).prop('ajax')){
                        this.getListDetails()
                        this.jq(event.target).prop('ajax',false)
                  }
                  
                  
            }
      },
      watch:{
            listClass:function(){
                   this.$nextTick(function(){
                         this.jq('.classBox').first().trigger('click')
                  })
            }
      },
      created(){
            // 调用左侧主要分类请求方法
            this.getListClassify()
            // 调用右侧列表详情请求方法
            this.getListDetails()
      }
}

</script>
<style>
/*头部搜索框部分 begin*/ 
header{
      height:4rem;
      width: 100%;
      background: white;
      overflow: hidden;
}
.inputBox{
      margin: 0.7rem 1.3rem;
      height:2.6rem;
      background: #f4f4f4 url('/static/img/listS.png') no-repeat -7px -9px;
      color: #999;
      border-radius: 1.3rem;
      background-size:4rem auto;
      padding-left:3rem;
      box-sizing: border-box;
      
}
.searchNear{
      margin-top: 0.6rem;
      background: #f4f4f4;
      border: 0;
      outline: 0;
}
/*头部搜索框部分 begin*/ 

/*主体分类部分 begin*/ 
.listLeft{
      width: 90px;
      background: #f8f8f8;
      position: absolute;
      top: 4rem;
      left: 0;
      bottom: 0;
}
.classBox{
      height: 43px;
      padding-left: 14px;
      line-height: 44px;
      font-size: 14px;
      color: #666666;
      border-bottom: 1px solid #e8e8e8;
      border-right: 1px solid #e8e8e8;
      background-color: #f8f8f8;
      position: relative;
}
.listChecked{
      padding-left: 11px;
      color: #47b34f;
      background-color: #FFF;
      border-left: 3px solid #47b34f;
      border-right-color: #FFF;
}
.listRight{
      position: absolute;
      left: 90px;
      right: 0;
      top: 4rem;
      bottom: 50px;
      overflow-x: hidden;
      overflow-y: auto;
      background: white;
}
.itemTitle{
      color: #666;
      line-height: 1.6rem;
      font-size: 13px;
      margin: 1.4rem 0 1rem 2.2rem;
}
.singleBox{
      display: flex;
      flex-wrap: wrap;
}
.gingleItem{
      width: 33.3%;
      text-align: center;
      color: #7d7d7d;
      font-size: 1rem;
      margin-bottom: 0.5rem;
}
.singleImg{
      display: block;
      width: 58%;
      margin: 0.5rem auto;
}
/*主体分类部分 end*/ 

/*底部固定导航begin*/ 
.navFooterBox{
  position: fixed;
  z-index: 801;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 50px;
  background: #fff;
  border-top: 1px solid #d9d9d9;
  box-sizing: border-box;
  display: flex;
}
.navFooter{
  display:inline-block;
  width:20%;
  text-align: center;
  font-size: 12px;
  box-sizing: border-box;
  color:#555;
  padding-top: 2.4rem;
}
.footerFirst{
  background:url('/static/img/footer.png') no-repeat center -250px;
   background-size:2rem auto;
}
.footerSec{
  background: url('/static/img/footer.png') no-repeat center -300px;
  background-size:2rem auto;
}

.footerThird{
  background: url('/static/img/footer.png') no-repeat center -350px;
  background-size:2rem auto;
}
.footerForth{
  background: url('/static/img/footer.png') no-repeat center -400px;
  background-size:2rem auto;
}
.footerFive{
  background: url('/static/img/footer.png') no-repeat center -450px;
  background-size:2rem auto;
}

.secSelect{
display:inline-block;
  width:20%;
  text-align: center;
  font-size: 12px;
  box-sizing: border-box;
  padding-top: 2.4rem;
background: url('/static/img/footer.png') no-repeat center -50px;
  background-size:2rem auto;
  color: #39ac69;
}
/*底部固定导航end*/ 
</style>

